<template>
  <el-dialog v-model="dialogVisible" width="65%" :before-close="handleClose" modal-class="pay-dialog" >
    <template #header>
      <div style="display: flex; align-items: center">
        <title-view title="选择付款计划模版" />
        <div style="color: #86909c">
          <div>（选择模板后，可根据项目情况修改施工节点及付款比例）</div>
        </div>
      </div>
    </template>
    <MethodList ref="methodList" :tableData="tableData"  v-loading.fullscreen="loading"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" style="width: 120px; height: 36px" color="#F2F3F5">取消</el-button>
        <el-button type="primary" style="width: 120px; height: 36px" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import MethodList from "../methodList/index.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { templateList } from "@/apis/contracting";

const emit = defineEmits(["getPaymentPlan"]);
const methodList = ref();
const customerId = ref("");
const tableData = ref([]);
const dialogVisible = ref(false);
const loading = ref(false);
// 打开
const openDialog = async id => {
  tableData.value = [];
  customerId.value = id;
  dialogVisible.value = true;
  await getTemplateList();
};
const getTemplateList = async () => {
  try {
    loading.value = true;
    const { data } = await templateList(customerId.value);
    tableData.value = data || [];
    loading.value = false;
  } catch (e) {
    loading.value = false;
  }
};
const handleClose = () => {
  dialogVisible.value = false;
};
const handleConfirm = () => {
  if (methodList.value.radio) {
    emit("getPaymentPlan", methodList.value.radio);
    dialogVisible.value = false;
  } else {
    ElMessage.error("请选择付款计划模版");
  }
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss"></style>
